<template>
	<view style="padding-top: 18rpx;  border-bottom: 1rpx dotted #babbca;" @click="goDetail">
		<view class="above">
			<view class="left">
				<u--image :src="posting.avatarUrl" 
					width="70rpx" height="70rpx" shape="circle"
				></u--image>
				<view style="padding-left: 10rpx;">
					<text>{{ posting.nickName }}</text>
				</view>
			</view>
			<view class="right">
				<text style="color: #babbca; font-size: 0.75rem; font-weight: 300;">{{ posting.showTime }}</text>
			</view>
		</view>
		<view class="content" style="padding-bottom: 5rpx;">
			<u-parse :content="posting.abstractContent"></u-parse>
		</view>
		<view class="below" style="padding-bottom: 10rpx;">
			<view class="left">
				<view style="margin-right: 10rpx;">
					<u-tag style="font-weight: 200" :text="'# ' + posting.categoryName" size="mini" 
						bgColor="#f8f8f8" borderColor="#f8f8f8" color="#8f8688"  shape="circle"
					>
					</u-tag>
				</view>
				<text v-if="posting.readNum > 100" style="font-size: 0.6rem; color: #b4b4b4; margin-left: 8prx;">{{posting.readNum}} 次围观</text>
			</view>
			<view class="right">
				<view>
					<u--text prefixIcon="thumb-up" :text="posting.likeNum" size="11"></u--text>
				</view>
				<view style="margin-left: 20rpx;">
					<u--text prefixIcon="chat" :text="posting.commentCount" size="11"></u--text>
				</view>
			</view>
		</view>
	</view>
</template>



<script>
	
	export default {
		data() {
			return {
			}
		},
		props: {
			posting: {
				id: '',
				nickName: '',
				abstractContent: '',
				avatarUrl: '',
				createTime: '',
				likeNum: 0,
				showTime: '',
				haveImg: false,
				imgNum: 0,
				commentCount: 0,
				readNum: 0
			}
		},
		computed: {
		},
		methods: {
			goDetail() {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + this.posting.id
				})
			}
		}
	}
	
</script>

<style scoped>
	
	.above {
		display: flex;
		justify-content: space-between;
	}
	
	.above .left {
		display: flex;
	}
	
	.above text {
		height: 80rpx; 
		line-height: 80rpx;
		color: #678195;
		font-weight: 450;
		font-size: 0.85rem;
	}
	
	.below {
		display: flex;
		justify-content: space-between;
	}
	
	.below .left {
		display: flex;
		align-items: center;
	}
	
	.below .right {
		display: flex;
	}
	
	.content u-parse {
		font-size: 0.85rem !important;
	}
	
	.imgshow {
		color: red;
	}
	
	
</style>